<template>
    <div class="jurisdiction">
        <Jurisdictionalert :render2="render2"></Jurisdictionalert>
        <Jurisdictiontable :data="data" :render2="render2"></Jurisdictiontable>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Jurisdictiontable from '../components/jurisdictiontable.vue'
import Jurisdictionalert from '../components/jurisdictionalert.vue'
import { getRoleList } from "../api/jurisdiction"
const data = ref([])
const render2 = () => {
    getRoleList().then(res => {
        getDD(res.data.data)
        data.value = getDD(res.data.data)
    })
}
const getDD = (data: any, id = 0) => {
    let arr1: any = [];
    let arr2: any = [];
    data.forEach((item: any) => {
        if (item.pid == id) {
            arr2 = getDD(data, item.id);
            if (arr2.length > 0) {
                item.children = arr2;
            }
            arr1.push(item);
        }
    });
    return arr1;
}
onMounted(() => {
    render2()
})
</script>

<style scoped>
.jurisdiction {
    width: 100%;
    background: #fff;
    padding: 20px;
}
</style>